<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报名管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="../../../static/images/favicon.ico" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="../../../static/back_css/public.css" th:href="@{/back_css/public.css}" media="all" />
    <link rel="stylesheet" href="../../../static/plugin/layui/css/layui.css" th:href="@{/plugin/layui/css/layui.css}" media="all" />
    <link rel="stylesheet" href="../../../static/back_css/user_management.css" th:href="@{/back_css/user_management.css}" media="all">
</head>
<body>
<div class="container">
    <div class="container_top">
        <div>
            <input type="text" placeholder="请输入关键字" class="layui-input" name="id" id="demoReload" autocomplete="off">
            <button data-type="reload" class="layui-btns"><i class="layui-icon layui-icon-search search_btn"></i></button>
        </div>
        <div>
            <div id="exportAllUser" style="display: inline-block;padding:4px;background: #fff;border-radius: 4px;cursor: pointer">导出</div>
        </div>
    </div>
    <div class="container_content">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
</div>
<script type="text/javascript" src="../../../static/plugin/layui/layui.js" th:src="@{/plugin/layui/layui.js}"></script>
<script type="text/html" id="genderTpl">
  {{# if(d.gender === 1) { }}
    男
  {{# } else if(d.gender === 2) { }}
    女
  {{# } else { }}
    未知
  {{# } }}
</script>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        table_render('/getUserRegInfo');
        function table_render(url) {
            table.render({
                elem: '#test'
                , url:url
                , even: true
                , page: true
                , limit: 20
                , limits: [20, 30]
                , id: 'idTest'
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left', style: 'display:none'},
                        {field: 'id', width: 70, title: '序号' ,hide: true},
                        {field: 'user_ID', align: 'center', width: 160, title: '微信号' },
                        {field: 'user_NAME',align: 'center', width: 100, title: '真实姓名'},
                        {field: 'gender', align: 'center', width: 80, title: '性别', sort: true, templet: '#genderTpl' },
                        {field: 'birthday', align: 'center', width: 110, title: '出生日期', sort: true },
                        {field: 'age',align: 'center', width: 110, title: '年龄', sort: true},
                        {field: 'city', align: 'center', title: '推荐地区', width: 150 },
                        {field: 'district_NAME',align: 'center', title: '推荐单位', width: 150},
                        {field: 'telephone',align: 'center', title: '联系电话', width: 150},
                        {field: 'sign_TIME', align: 'center', title: '报名时间', width: 200 }
                    ]
                ]
            });
        }
        $(".search_btn").on("click", function () {
            table.reload("idTest", {
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    USER_NAME: $("#demoReload").val()//搜索的关键字
                }
            })
            return false;
        });
        $("#exportAllUser").click(function(){
            layer.msg("正在导出数据，请勿重复操作，请稍候···");
            window.location.href='/exportAllSignInfo';
        })
        //这里以搜索为例
        active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('idTest', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        id: demoReload.val()
                    }
                });
            }
        };

        $('.layui-btns').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>